*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.width{
  width: 60vw;
}

.row{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.column{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-container {
  width: 100vw;
  margin: 0 auto;
}


.app-container .banner-box {
  margin-bottom: 1vw;
}

.nav-box {
  font-size: 2vw;
  color: gray;
  padding-left: 1vw;
}

.th {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10vw;
  height: 4vw;
  color: rgba(0, 0, 0, 0.85);
  font-size: 1vw;
  font-weight: 600;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  /* 设置背景颜色变化的过渡效果，持续0.3秒，动画以ease方式执行 */
transition: background 0.3s ease;
}

.tr {
  display: flex;
  width: 100%;
/* 设置光标为指针样式，通常用于表示用户可以点击或交互的元素 */
cursor: pointer;
  border-bottom: 1px solid #ebeef5;
}

/* 当表格行（.tr）悬停时，设置背景颜色为浅灰色 */
.tr:hover {
  background-color: #f5f7fa;
}

/* 为表格中的每个第二行（.tr）设置更浅的背景颜色，以交替行的视觉效果 */
.tr:nth-child(2n) {
  background-color: #fafafa;
}

.td {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
}

.table img {
  width: 8vw;
  height: 8vw;
}

button {
  /* 移除按钮默认轮廓 */
  outline: 0;
  /* 移除按钮默认阴影 */
  box-shadow: none;
  /* 设置按钮文本颜色为白色 */
  color: #fff;
  /* 设置按钮背景色和边框颜色 */
  background: #d9363e;
  border-color: #d9363e;
  /* 设置行高以控制文本垂直对齐 */
  /* line-height: 1.5715; */
  /* 设置按钮为相对定位，以便于后续的定位操作 */
  position: relative;
  /* 使按钮内容对齐，同时定义为行内块元素，以便与其他元素对齐 */
  display: inline-block;
  /* 确保按钮内的文本不会换行 */
  white-space: nowrap;
  /* 设置文本居中对齐 */
  text-align: center;
  /* 设置边框样式，透明色1像素实线 */
  border: 1px solid transparent;
  /* 添加轻微的底部阴影，增强按钮的立体感 */
  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
  /* 设置光标为指针，表明按钮可点击 */
  cursor: pointer;
  /* 设置过渡效果，使按钮在状态变化时有动画效果 */
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* 禁止文本选择，防止用户选择按钮文本 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 设置触摸操作，优化移动端体验 */
  touch-action: manipulation;
  /* 设置按钮高度 */
  height: 4vw;
  /* 设置按钮内边距，控制按钮大小和文本与边框的距离 */
  padding: 0.2vw 1vw 0.2vw 1vw ;
  /* 设置字体大小，根据视窗宽度调整 */
  font-size: 2vw;
  /* 设置按钮圆角，控制按钮外观 */
  border-radius: 1vw;
}

button.pay {
  background-color: #3f85ed;
  margin-left: 1vw;
}

.bottom {
  height: 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 1vw;
  border: 1px solid #f0f0f0;
  border-top: none;
  padding-left: 1vw;
}

.check-all {
  cursor: pointer;
}

.right-box {
  display: flex;
  align-items: center;
}

.price {
  color: hotpink;
  font-size: 4vw;
  font-weight: 700;
}

.price-box {
  display: flex;
  align-items: center;
}
.empty {
  padding: 1vw;
  text-align: center;
  font-size: 4vw;
  color: #909399;
}